<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>全屏接口</title>
</head>
<body>
    <div>
        <img src="../static/images/h5c3.png" alt="h5c3">
        <input type="button" value="全屏" id="full">
        <input type="button" value="退出全屏" id="cancel">
        <input type="button" value="是否全屏" id="isFull">
    </div>

    <script>
        /*
            全屏操作的主要方法和属性：
                1 requestFullScreen() 开启全屏显示
                    不同浏览器添加不同的前缀
                        chrome 添加 webkit
                        firefox 添加 moz
                        ie 添加 ms
                        opera 添加 o
                2 cancelFullScreen() 退出全屏显示，不同的浏览器也需要加前缀只能使用 document 操作
                    exitFullscreen() 退出全屏
                3 fullScreenElement 是否是全屏状态，只能使用 document 操作
        */
        var oDiv = document.querySelector("div")
        document.querySelector("#full").onclick = function() {
            // 全屏操作
            oDiv.requestFullscreen()
        }

        // 退出全屏 只能使用 document 来实现
        document.querySelector("#cancel").onclick = function() {
            // 退出操作
            // document.exitFullscreen()
        }

        document.querySelector("#isFull").onclick = function() {
            if (document.fullscreenElement) {
                console.log("全屏元素状态：", document.fullscreenElement)
            }
        }
    </script>
</body>
</html>